<template>
  <div class="rankingnav">
    <div class="rankingnav-box">
      <div class="rankingnav-blue" :style="{ top: tops + 'rem' }"></div>
      <div
        class="rankingnav-item"
        v-for="(item, index) in rankingItem"
        :key="index"
        @mouseenter="changtop(index)"
        @mouseleave="changleave()"
        @click="changIndex(index)"
      >
        <div class="ranking-chnag">
          <img :src="item.img" alt="" />
        </div>
        <div :class="{ rankingactive: indexs === index }">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RankingItem",
  data() {
    return {
      rankingItem: [
        {
          img: "http://juntower.top/redu.svg",
          url: "/rankingpage",
          name: "热度榜",
        },
        {
          img: "http://juntower.top/miantiao.svg",
          url: "/rankingchinese",
          name: "中式榜",
        },
        {
          img: "http://juntower.top/kaoya.svg",
          url: "/rankingtradition",
          name: "传统榜",
        },
        {
          img: "http://juntower.top/hanbao.svg",
          url: "/rankingamerican",
          name: "美式榜",
        },
        {
          img: "http://juntower.top/tianping.svg",
          url: "/rankingdesserts",
          name: "甜品榜",
        },
      ],
      indexs: 0,
      foodList: "",
      tops: 0.07,
      stops: 0.07,
      changetop: 0,
      navFixed: false,
      nones: false,
    };
  },

  methods: {
    changtop(index) {
      if (index == 0) {
        this.tops = 0.07;
      }
      if (index == 1) {
        this.tops = 0.07 + 0.55;
      }
      if (index == 2) {
        this.tops = 0.07 + 0.52 * 2;
      }
      if (index == 3) {
        this.tops = 0.07 + 0.52 * 3;
      }
      if (index == 4) {
        this.tops = 0.07 + 0.53 * 4;
      }
    },

    changleave() {
      this.tops = this.stops;
    },

    changIndex(index) {
      this.$router.push(this.rankingItem[index].url);
      location.reload();
    },
  },
};
</script>

<style>
.ranking-item {
  font-size: 0.1rem;
  text-align: center;
  border-radius: 0.1rem;
  border: 1px solid rgb(229, 229, 229);
  width: 0.7rem;
  left: 1.5rem;
  position: fixed;
  top: 1.1rem;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

.ranking-item img {
  width: 0.2rem;
  height: 0.2rem;
  margin-top: 0.1rem;
}

.ranking-itembox {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 auto;
  color: rgb(92, 99, 102);
  font-size: 0.11rem;
  transition: all 0.5s;
  margin-top: 0.05rem;
}

.ranking-itembox:hover {
  background-color: rgb(230, 247, 255);
  border-radius: 0.1rem;
}

.ranking-itembox a {
  text-decoration: none;
  color: #000;
}
.rankingHua {
  width: 0.7rem;
  height: 0.7rem;
  background-color: rgb(230, 247, 255);
  border-radius: 0.1rem;
  position: relative;
  left: 0.1rem;
  top: 0.5rem;
  z-index: -1;
}

.ranking-itembox:hover {
  cursor: pointer;
}

.rankingClick {
  background-color: rgb(230, 247, 255);
  border-radius: 0.1rem;
  transition: all 0.5s;
}

.rankingActive a {
  color: rgb(125, 214, 250);
}

.rankingnav {
  position: fixed;
  top: 1.1rem;
  left: 1.5rem;
  z-index: 99;
}

.rankingnav-box {
  position: relative;
  width: 0.7rem;
  border: 1px solid rgb(224, 218, 214);
  text-align: center;
  padding-top: 0.07rem;
  padding-bottom: 0.07rem;
  border-radius: 10px;
}

.ranking-chnag {
  font-size: 0.1rem;
}

.rankingnav-blue {
  position: absolute;
  width: 80%;
  height: 0.57rem;
  background-color: rgb(223, 242, 252);
  left: 10%;
  border-radius: 10%;
  margin-top: 0.04rem;
  z-index: -1;
  cursor: pointer;
  transition: all 0.5s;
}

.rankingnav-item {
  width: 80%;
  /* background-color: rgb(223, 242, 252); */
  height: 0.5rem;
  margin: 0 auto;
  border-radius: 10%;
  margin-top: 0.04rem;
  cursor: pointer;
}

.rankingnav-item div:nth-child(1) {
  padding-top: 0.05rem;
}

.rankingnav-item div:nth-child(2) {
  padding-bottom: 0.07rem;
  margin-top: 0.02rem;
  font-size: 0.09rem;
}

.rankingnav-item img {
  width: 50%;
}

.rankingactive {
  color: rgb(125, 214, 250);
}
</style>